import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi'
import { Upload, Modal, Button, Tag, Row, Col, Card, Space, Tooltip, Image, notification } from 'antd';
import CopyToClipboard from 'react-copy-to-clipboard';
import html2canvas from 'html2canvas';
import QRCode from 'react-qr-code';
import SortableGallery from '@/components/ShareImgCollect';
const ShareApp = (props) => {
  const { visible = {}, onClose, dispatch } = props
  const { show = false, detail = {}, } = visible
  const { id, goodsType } = detail
  const [shareVisible, setShareVisible] = useState(false);
  const [activeTabKey1, setActiveTabKey1] = useState('h5');
  const [shareInfo, setShareInfo] = useState({})
  const handleCancel = () => onClose();
  console.log(detail, 1123123)
  useEffect(() => {
    if (show) {
      fetchGetShareInfo()
    }

  }, [show])
  const setShareImage = () => {
    dispatch({
      type: 'behaviorEecord/fetchListGoodsPoster',
      payload: {
        goodsId: id,
        goodsType: goodsType,
      },
      callback: (e) => {
        setShareVisible({
          show: true,
          detail: e,
          value: detail,
        });
      },
    });
  }
  const fetchGetShareInfo = () => {
    dispatch({
      type: 'liveStreaming/fetchGetShareInfo',
      payload: {
        shareId: id,
        shareType: 'goods',
        subType: goodsType,
        organizationId: window.localStorage.getItem(
          'organizationId',
        )
      },
      callback: (e) => {
        setShareInfo(e.shareInfo)
      }
    })
  }
  const tabList = [
    {
      key: 'h5',
      tab: '店铺H5',
    },
    {
      key: 'vCode',
      tab: '小程序观看',
    },
  ];
  const containerRef = useRef(null);
  const { miniProgramQrCodeUrl, wechatUrl = '' } = shareInfo
  const DownloadButton = (imageUrl) => {
    // 创建一个虚拟的链接元素
    const link = document.createElement('a');
    link.href = imageUrl;
    link.download = 'image.jpg';
    // 模拟点击下载链接
    link.click();
  }
  const contentList = {
    h5: <Row>
      <Col offset={1} span={11}>
        <Tooltip title="点击图片下载">
          <div style={{ padding: 0, margin: 0, width: 240, height: 240 }} onClick={() => convertToImage()} ref={containerRef}>
            {wechatUrl && <QRCode style={{ width: 240, height: 240 }} className='shareImage_image_imgcode' value={wechatUrl} />}
          </div>
        </Tooltip>
        <CopyToClipboard text={wechatUrl} onCopy={() => {
          notification.success({
            message: '温馨提示',
            description: '复制成功',
          });
        }}>
          <Button type='primary'>复制分享链接</Button>
        </CopyToClipboard>
      </Col>
      <Col push={3} span={9}>
        <Space direction='vertical' style={{
          width: '100%',
        }}>
          <Tag color="#ebf3ff" style={{ fontSize: 18, padding: '6px 12px', color: '#1472ff' }}>通用场景</Tag>
          <div>快捷分享，支持所有直播场景</div>
          <div><img style={{ width: 16, height: 16 }} data-v-0d0fd64c="" src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lf0jih2r0ok6.png"></img> &nbsp;&nbsp;&nbsp;直播打赏和带货</div>
          <div><img style={{ width: 16, height: 16 }} data-v-0d0fd64c="" src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lf0jih2r0ok6.png"></img> &nbsp;&nbsp;&nbsp;支持电脑浏览器打开</div>
          <div><img style={{ width: 16, height: 16 }} data-v-0d0fd64c="" src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lf0jih370bs6.png"></img> &nbsp;&nbsp;&nbsp;已开启全屏互动 (全屏观看时会跳转至鹅直播小程序，将不支持打赏，且带货链路较长)</div>
        </Space>

      </Col>
    </Row >,
    vCode: <Row>
      <Col offset={1} span={11}>
        <div style={{ padding: 0, margin: 0, width: 240, height: 240 }} onClick={() => convertToImage()} ref={containerRef}>
          <Tooltip title="点击图片下载">
            <Image preview={false} src={miniProgramQrCodeUrl} />
          </Tooltip>
        </div>

      </Col>
      <Col push={3} span={9}>
        <Space direction='vertical' style={{
          width: '100%',
        }}>
          <Tag color="#ebf3ff" style={{ fontSize: 18, padding: '6px 12px', color: '#1472ff' }}>教学场景</Tag>
          <div>实时连麦互动，更适合教学交付场景</div>
          <div><img style={{ width: 16, height: 16 }} data-v-0d0fd64c="" src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lf0jih2r0ok6.png"></img> &nbsp;&nbsp;&nbsp;连麦体验更佳</div>
          <div><img style={{ width: 16, height: 16 }} data-v-0d0fd64c="" src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lf0jih2r0ok6.png"></img> &nbsp;&nbsp;&nbsp;全屏互动观看</div>
        </Space>
      </Col>
    </Row>,
  }[activeTabKey1];
  const contentListOffline = {
    h5: <Row>
      <Col offset={1} span={23}>
        <Tooltip title="点击图片下载">
          <div style={{ padding: 0, margin: 0, width: 240, height: 240 }} onClick={() => convertToImage()} ref={containerRef}>
            {wechatUrl && <QRCode style={{ width: 240, height: 240 }} className='shareImage_image_imgcode' value={wechatUrl} />}
          </div>
        </Tooltip>
        <CopyToClipboard text={wechatUrl} onCopy={() => {
          notification.success({
            message: '温馨提示',
            description: '复制成功',
          });
        }}>
          <Button type='primary'>复制分享链接</Button>
        </CopyToClipboard>
      </Col>

    </Row >,
    vCode: <Row>
      <Col offset={1} span={23}>
        <div style={{ padding: 0, margin: 0, width: 240, height: 240 }} onClick={() => convertToImage()} ref={containerRef}>
          <Tooltip title="点击图片下载">
            <Image preview={false} src={miniProgramQrCodeUrl} />
          </Tooltip>
        </div>

      </Col>
    </Row>,
  }[activeTabKey1];
  const render = {
    offline: contentListOffline,
    videoCourse: contentListOffline,
    liveCourse: contentListOffline,
    faceToFace: contentListOffline,
    video: contentListOffline,
    directLive: contentList,
    live: contentList,
    service: contentListOffline
  }[goodsType]
  const convertToImage = () => {
    const setup = {
      useCORS: true, // 使用跨域
    };
    if (containerRef.current) {
      html2canvas(containerRef.current, setup)
        .then((canvas) => {
          // 将canvas转化为图片路径
          const dataUrl = canvas.toDataURL('image/png');
          // dataUrl 包含转化后的图片路径
          DownloadButton(dataUrl)
        })
        .catch((error) => {
          console.error('转化失败', error);
        });
    }
  };

  //   const contentList = {
  //   h5: <Row>
  //     <Col offset={1} span={11}>
  //       <Tooltip title="点击图片下载">
  //         <div style={{ padding: 0, margin: 0, width: 240, height: 240 }} onClick={() => convertToImage()} ref={containerRef}>
  //           {wechatUrl && <QRCode style={{ width: 240, height: 240 }} className='shareImage_image_imgcode' value={wechatUrl} />}
  //         </div>
  //       </Tooltip>
  //       <CopyToClipboard text={wechatUrl} onCopy={() => {
  //         notification.success({
  //           message: '温馨提示',
  //           description: '复制成功',
  //         });
  //       }}>
  //         <Button type='primary'>复制分享链接</Button>
  //       </CopyToClipboard>
  //     </Col>
  //     <Col push={3} span={9}>
  //       <Space direction='vertical' style={{
  //         width: '100%',
  //       }}>
  //         <Tag color="#ebf3ff" style={{ fontSize: 18, padding: '6px 12px', color: '#1472ff' }}>通用场景</Tag>
  //         <div>快捷分享，支持所有直播场景</div>
  //         <div><img style={{ width: 16, height: 16 }} data-v-0d0fd64c="" src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lf0jih2r0ok6.png"></img> &nbsp;&nbsp;&nbsp;直播打赏和带货</div>
  //         <div><img style={{ width: 16, height: 16 }} data-v-0d0fd64c="" src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lf0jih2r0ok6.png"></img> &nbsp;&nbsp;&nbsp;支持电脑浏览器打开</div>
  //         <div><img style={{ width: 16, height: 16 }} data-v-0d0fd64c="" src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lf0jih370bs6.png"></img> &nbsp;&nbsp;&nbsp;已开启全屏互动 (全屏观看时会跳转至鹅直播小程序，将不支持打赏，且带货链路较长)</div>
  //       </Space>

  //     </Col>
  //   </Row >,
  //   vCode: <Row>
  //     <Col offset={1} span={11}>
  //       <div style={{ padding: 0, margin: 0, width: 240, height: 240 }} onClick={() => convertToImage()} ref={containerRef}>
  //         <Tooltip title="点击图片下载">
  //           <Image preview={false} src={miniProgramQrCodeUrl} />
  //         </Tooltip>
  //       </div>

  //     </Col>
  //     <Col push={3} span={9}>
  //       <Space direction='vertical' style={{
  //         width: '100%',
  //       }}>
  //         <Tag color="#ebf3ff" style={{ fontSize: 18, padding: '6px 12px', color: '#1472ff' }}>教学场景</Tag>
  //         <div>实时连麦互动，更适合教学交付场景</div>
  //         <div><img style={{ width: 16, height: 16 }} data-v-0d0fd64c="" src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lf0jih2r0ok6.png"></img> &nbsp;&nbsp;&nbsp;连麦体验更佳</div>
  //         <div><img style={{ width: 16, height: 16 }} data-v-0d0fd64c="" src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lf0jih2r0ok6.png"></img> &nbsp;&nbsp;&nbsp;全屏互动观看</div>
  //       </Space>
  //     </Col>
  //   </Row>,
  // };
  const onTab1Change = (key) => {
    setActiveTabKey1(key);
  };
  return <Modal width={800} title={<div>
    分享观看 &nbsp; &nbsp; &nbsp; <Button onClick={() => {
      setShareImage()
    }} type='primary'>自定义海报设置</Button>
  </div>} visible={show} footer={null} onCancel={handleCancel}>
    <Card style={{
      width: '100%',
      height: 400
    }} tabList={tabList}
      activeTabKey={activeTabKey1}
      onTabChange={(key) => {
        onTab1Change(key);
      }}>
      {render}
    </Card>
    <SortableGallery visible={shareVisible} onClose={() => setShareVisible(false)}></SortableGallery>
  </Modal >
}

export default connect(({ behaviorEecord, loading }) => ({
  loading: loading.models.liveStreaming || loading.models.behaviorEecord,
}))(ShareApp);
